<template>
    <div class="public-box">
        <div class="header-btn">
            <el-button class="btn" type="primary" @click="handleRelieveRelevancesClick">解除关联</el-button>
            <el-button class="btn" type="primary" @click="handleRelevancesClick">关联权限</el-button>
            <el-button class="btn add-users" type="primary" @click="handleAddUsersClick">添加用户组</el-button>
        </div>
        <el-table
            :data="usersTableData"
            border
            ref="usersTable"
            style="width: 100%"
            class="el-table-public"
            height="100%">
            <el-table-column
                type="selection"
                width="35">
            </el-table-column>
            <el-table-column
                prop="date"
                label="日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="用户组"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="190">
                <template slot-scope="scope">
                    <el-button @click="handleViewClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="handleRelevanceClick(scope.row)" type="text" size="small">{{scope.row.status ? '关联权限' : '解除关联'}}</el-button>
                    <el-button @click="handleUpdateClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="handleDeleteClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="添加新用户组" :visible.sync="addUsersDialog">
            <el-form :model="addUsersForm" :label-width="formLabelWidth">
                <el-form-item label="用户组名称：" >
                    <el-input v-model="addUsersForm.name"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addUsersDialog = false">确 定</el-button>
                <el-button @click="addUsersDialog = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'vue',
    data() {
        return {
            usersTableData: [
                {
                    date: '2016-05-02',
                    name: '用户组1',
                    address: '上海市普陀区金沙江路 1518 弄',
                    status: 0
                }, {
                    date: '2016-05-04',
                    name: '用户组2',
                    address: '上海市普陀区金沙江路 1517 弄',
                    status: 1
                }, {
                    date: '2016-05-01',
                    name: '用户组3',
                    address: '上海市普陀区金沙江路 1519 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '用户组4',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '用户组5',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '用户组6',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '用户组7',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '用户组8',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '用户组9',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '用户组10',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 1
                }, {
                    date: '2016-05-03',
                    name: '用户组11',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '用户组12',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 1
                }, {
                    date: '2016-05-03',
                    name: '用户组13',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 1
                }, {
                    date: '2016-05-03',
                    name: '用户组14',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 1
                }, {
                    date: '2016-05-03',
                    name: '用户组15',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 1
                }, {
                    date: '2016-05-03',
                    name: '用户组16',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '用户组17',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 1
                }
            ],
            addUsersDialog: false,
            addUsersForm: {
                name: ''
            },
            formLabelWidth: '100px'
        }
    },
    props: {

    },
    components: {

    },
    computed: {

    },
    watch: {

    },
    methods: {
        // !添加用户组点击事件
        handleAddUsersClick () {
            this.addUsersDialog = true;
        },
        // !关联权限点击事件--(批量)
        handleRelevancesClick () {
            let selectionData = this.$refs.usersTable ? this.$refs.usersTable.selection : [];
            let relevancesData = []; // 筛选未关联的数据
            selectionData.forEach(item => {
                if (item.status) {
                    relevancesData.push(item)
                }
            });
            console.log(relevancesData)
        },
         // !用户组解除关联点击事件--(批量)
        handleRelieveRelevancesClick () {
            let selectionData = this.$refs.usersTable ? this.$refs.usersTable.selection : [];
            let relieveRelevancesData = []; // 筛选已关联的数据
            selectionData.forEach(item => {
                if (!item.status) {
                    relieveRelevancesData.push(item)
                }
            });
            console.log(relieveRelevancesData)
        },
        // !用户组查看点击事件
        handleViewClick () {

        },
        // !用户组关联权限点击事件--(单独)
        handleRelevanceClick (row) {
            if(row.status) {
                // 关联
                console.log('关联')
            } else {
                // 解除
                console.log('解除')
            }
        },
        // !用户组编辑点击事件
        handleUpdateClick (row) {
            this.addUsersDialog = true;
            this.addUsersForm.name = row.name;
            console.log(this.addUsersForm)
        },
        // !用户组删除点击事件
        handleDeleteClick (row) {
            console.log(row)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }
    },
    created() {

    },
    mounted() {

    }
}
</script>

<style scoped lang="less">

 
</style>
